<template>
  <div class="pic">
    <!-- action是上传的地址 -->
    <el-upload class="avatar-uploader"
               :action="uploadUrl"
               :show-file-list="false"
               :http-request="httprequest"
               :on-change="change">
      <img v-if="imageUrl"
           :src="imageUrl"
           class="avatar"
           v-show="isImgShow" />
      <video v-else-if="videoURL"
             :src="videoURL"
             class="screen"
             controls
             v-show="isVideoShow"> </video>
      <i v-else
         class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <!-- 点击X号图片删除 -->
    <div v-if="imageUrl||videoURL"
         class="del"
         @click="del">X</div>

  </div>
</template>

<script>
import { uploads } from '@/api/login.js'
import video from './video.vue'
export default {
  components: { video },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  name: 'Picture',
  data () {
    return {
      imageUrl: '',
      file: {},
      uploadUrl: '',
      videoURL: '',
      isImgShow: true,
      isVideoShow: true
    }
  },
  methods: {
    del () {
      this.imageUrl = ''
      this.videoURL = ''
    },
    async httprequest (b) {
      if (b.file.type === '') { }
      const fd = new FormData()
      fd.append('image', b.file)
      const res = await uploads(fd)
      this.$emit('input', res.data.file_path)
    },
    // 将上传图片的原路径赋值给临时路径
    async change (file) {
      if (file.raw.type.split('/')[0] === 'image') {
        // this.isVideoShow = false
        this.isImgShow = true
        this.imageUrl = URL.createObjectURL(file.raw)
      } else if (file.raw.type.split('/')[0] === 'video') {
        file.size = 2318514
        this.isImgShow = false
        this.videoURL = URL.createObjectURL(file.raw)
      }
    }

  }
}
</script>

<style lang="less" scoped>
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar,
.screen {
  width: 178px;
  height: 178px;
  display: block;
  position: relative;
}
.del {
  position: absolute;
  top: -6px;
  right: 339px;
  font-size: 20px;
  cursor: pointer;
}
</style>
